<!DOCTYPE html>
<html>
<head>
  <title>RaytraceNacl</title>

  <script type="text/javascript">
    var RaytraceModule = null;
    var statusText = '';
    var paintInterval = null;
    var startTime;

    function roundNumber(num, dec) {
	    var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
	    return result;
    }

    function moduleDidLoad() {
      RaytraceModule = document.getElementById('raytrace');
      updateStatus('Loaded');
      // TODO: enable button
    }

    function pageDidUnload() {
      clearInterval(paintInterval);
    }

    // If the page loads before the Native Client module loads, then set the
    // status message indicating that the module is still loading.  Otherwise,
    // do not change the status message.
    function pageDidLoad() {
      if (RaytraceModule == null) {
        updateStatus('Loading');
      } else {
        // It's possible that the Native Client module onload event fired
        // before the page's onload event.  In this case, the status message
        // will reflect 'SUCCESS', but won't be displayed.  This call will
        // display the current message.
        updateStatus();
      }
    }

    function doPaint() {
      var progress = roundNumber(RaytraceModule.paint(), 2);
      updateProgress(progress);
    }

    function startRaytrace() {
      startTime = (new Date()).getTime();

      var sceneoptions = document.getElementById('scene').options;
      var sceneindex = sceneoptions.selectedIndex;
      RaytraceModule.scene = sceneoptions[sceneindex].value;

      var modeoptions = document.getElementById('mode').options;
      var modeindex = modeoptions.selectedIndex;
      RaytraceModule.mode = modeoptions[modeindex].value;

      RaytraceModule.aa = document.getElementById('aa').value;
      RaytraceModule.num_rays = document.getElementById('num_rays').value;
      
      var errno = RaytraceModule.start();
      paintInterval = setInterval("doPaint()", 30);
      console.log('Started: ' + errno);
      updateStatus('Started');
    }

    function stopRaytrace() {
      clearInterval(paintInterval);
      var errno = RaytraceModule.stop();
      console.log('Stopped: ' + errno);
      updateStatus('Stopped');
    }

    function onComplete() {
      var deltaTime = (new Date()).getTime() - startTime;
      console.log("Complete");
      clearInterval(paintInterval);
      //TODO: find why this crashes.
//      doPaint();
      updateStatus('Completed in ' + roundNumber(deltaTime/1000, 3) + 's');
      updateProgress();
    }

    function updateStatus(opt_message) {
      if (opt_message)
        statusText = opt_message;
      var statusField = document.getElementById('status_field');
      if (statusField)
        statusField.innerHTML = statusText;
    }

    function updateProgress(progress) {
      if (progress)
        progress = progress + '%';
      else
        progress = '';
      var progressField = document.getElementById('progress_field');
      if (progressField)
          progressField.innerHTML = progress;
    }
  </script>
</head>
<body onload="pageDidLoad()" onunload="pageDidUnload()">

<h1>Native Client Module RaytraceNacl</h1>
<div>
  <form name="form">
    <label for="scene">Scene</label>
    <select id="scene">
      <option value="cornell" selected="selected">Cornell</option>
      <option value="sky">Sky</option>
      <option value="nightsky">*Night Sky</option>
      <option value="island">Island</option>
      <option value="vista">*Vista</option>
      <option value="overlap">Overlap</option>
      <option value="wada">*Wada</option>
      <option value="wada2">*Wada2</option>
      <option value="forest">*Forest</option>
      <option value="NOTICE" disabled="disabled">
        <em>* not implemented</em>
      </option>
    </select><br/>
    <label for="mode">Mode</label>
    <select id="mode">
      <option value="whitted">Whitted</option>
      <option value="reverse_path" selected="selected">Reverse Path</option>
      <option value="debug_normal">DEBUG normal</option>
      <option value="debug_path_count">*DEBUG path count</option>
      <option value="debug_variance">*DEBUG variance</option>
      <option value="NOTICE" disabled="disabled">
        <em>* not implemented</em>
      </option>
    </select>
    <!-- TODO: validation of sensible numbers -->
    <label for="aa">Anti alias</label>
    <input id="aa" type="text" value="2"/>
    <label for="num_rays">Num rays per pixel</label>
    <input id="num_rays" type="text" value="1"/><br/>
    <input type="button" value="start" onclick="startRaytrace();"/>
    <input type="button" value="stop" onclick="stopRaytrace();"/>
    <span id="progress_field"></span>
    <span id="status_field"></span>
  </form>
</div>
  <div>
  <!-- Load the published .nexe.  This includes the 'nacl' attribute which
  shows how to load multi-architecture modules.  Each entry in the "nexes"
  object in the .nmf manifest file is a key-value pair: the key is the
  instruction set architecture ('x86-32', 'x86-64', etc.); the value is a URL
  for the desired NaCl module.
  To load the debug versions of your .nexes, set the 'nacl' attribute to the
  _dbg.nmf version of the manifest file.
  -->
  <embed name="nacl_module"
         id="raytrace"
         width=480 height=360
         dimensions="2"
         nacl="raytrace_dbg.nmf"
         type="application/x-nacl"
         onload="moduleDidLoad();" />
  <br />
</div>
</body>
</html>
